import React, { Component } from "react";

class Child1 extends Component {
    state = {
        a: 1,
        b: 2,
    };
    render() {
        return (
            <>
                <p>child1</p>
                <em ref={ x => this.emBox = x }>100</em>
            </>
        )
    };
};

const Child2 = React.forwardRef(function Child2(props, ref) {
    console.log('Child2=====props', props);
    console.log('调用Child2函数组件的时候，设置的ref属性值，【函数： x => this.child2 = x】', ref);
    return (
        <>
            <p>child2</p>
            <button ref={ref}>按钮</button>
        </>
    )
});

class DemoComponentRef extends Component {
    // child2 = React.createRef();
    render() {
        return (
            <>
                <Child1 ref={ x => this.child1 = x }></Child1>
                {/* <Child2 ref={ this.child2 }></Child2> */}
                <Child2 ref={ x => this.child2Button = x } name="child2-函数组件"></Child2>
            </>
        )
    };
    componentDidMount() {
        console.log(this.child1); // 获取类子组件实例
        console.log(this.child1.emBox); // 获取类子组件中的子元素
        console.log(this.child2Button); // 获取函数子组件中的子元素
    };
};

export default DemoComponentRef;